<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/artbase.css" />
    <style type="text/css">
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

      li {
        width: 40%;
        padding-bottom: 20px;
      }

      a {
        width: 100%;
        padding-bottom: 100%;
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>
        <a href="javascript:;" style="background-image: url(images/antique.png);"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/art.png)"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artcategoryanother.png)"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artcategorybanner.png)"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artcategoryitem1.png);"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artheaderbgc.png)"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artindividualhome.png)"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artistcover.png)"></a>
      </li>
      <li>
        <a class="lazy" href="javascript:;" data-original="images/artistcustomizelist1.png"></a>
      </li>
      <li>
        <a class="lazy" href="javascript:;" data-original="images/artistcustomizelist2.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide01.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/ThiJCdBy695DR0rCtFLqS4AfBj57EttNsSDI1qXIELFhyNgIu2r1sSZaiuPx0oxn.jpg"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide01.png"></a>
      </li>
      <li>
        <a href="javascript:;" style="background-image: url(images/artistcover.png)"></a>
      </li>
      <li>
        <a class="lazy" href="javascript:;" data-original="images/artistcustomizelist1.png"></a>
      </li>
      <li>
        <a class="lazy" href="javascript:;" data-original="images/artistcustomizelist2.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide01.png"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/ThiJCdBy695DR0rCtFLqS4AfBj57EttNsSDI1qXIELFhyNgIu2r1sSZaiuPx0oxn.jpg"></a>
      </li>
      <li>
        <a href="javascript:;" class="lazy" data-original="images/artistcustomizeslide01.png"></a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="https://cn.bing.com/ImageResolution.aspx?w=375&h=667" loading="lazy" width="400" height="250" alt="">
        </a>
      </li>
    </ul>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function() {
        $('.lazy').lazyload()
      })
    </script>
  </body>
</html>
